/* Miscellaneous component styles using design tokens */
.c-example-fallback {
  color: var(--color-text);
}

/* Error section styles using spacing and type tokens */
.c-error-section {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
  padding: var(--space-9) var(--space-4);
  text-align: center;
}

.c-error-emoji {
  font-size: var(--font-size-6);
}

.c-error-code {
  font-size: var(--font-size-7);
  font-weight: 800;
  line-height: 1;
}

.c-error-title {
  font-size: var(--font-size-4);
  margin: 0;
}

.c-error-description {
  max-width: var(--measure);
}

/* Back to top button */
.c-back-to-top {
  background: var(--gradient-primary);
  border: none;
  border-radius: 50%;
  bottom: calc(var(--space-10) + var(--space-2));
  box-shadow: var(--shadow-elevation-2);
  color: var(--color-white);
  cursor: pointer;
  height: calc(var(--space-8) - var(--space-2));
  position: fixed;
  right: var(--space-5);
  transition:
    filter var(--duration-normal) var(--easing-standard),
    transform var(--duration-normal) var(--easing-standard),
    box-shadow var(--duration-normal) var(--easing-standard);
  width: calc(var(--space-8) - var(--space-2));
  z-index: 9999;
}

.c-back-to-top:hover {
  box-shadow: var(--shadow-elevation-3);
  filter: brightness(1.1);
}
.c-back-to-top:active {
  transform: scale(0.96);
}
.c-back-to-top:focus-visible {
  box-shadow: var(--shadow-elevation-2), var(--focus-ring);
  outline: none;
}

.c-back-to-top svg {
  pointer-events: none;
}
